<template>
  <q-input class="q-px-sm" v-model="text" filled type="textarea" rows="20" label="Excle中链接转图片,单元格内有多个图片链接使用分号(;)分割" />
  <div class="q-pa-md q-gutter-sm" style="text-align: center;">
    <q-checkbox left-label v-model="checkFormat" checked-icon="task_alt" unchecked-icon="task_alt">
      <q-tooltip class="bg-accent" anchor="top middle" self="center middle">是否校验链接后缀属于图片</q-tooltip>
    </q-checkbox>
    <q-btn class="color-btn" size="small" label="转换并复制" @click="format_text_rows_to_one" />
    <q-btn class="color-second-btn" size="small" label="清空" @click="clear" />
    <q-btn outline round size="small" color="primary" icon="help" @click="show_info" />
    <div class="row justify-center q-col-gutter-xs">
      <div><q-input type="number" style="max-width: 150px;" filled color="purple-12" v-model.number="input_width"
          label="图片宽(像素)" /></div>
      <div><q-input type="number" style="max-width: 150px;" filled color="purple-12" v-model.number="input_height"
          label="图片高(像素)" /></div>
    </div>

  </div>
  <!-- 说明信息 -->
  <q-dialog v-model="basic" transition-show="rotate" transition-hide="rotate">
    <q-card>
      <q-card-section>
        <q-timeline color="secondary">
          <q-timeline-entry title="设置图片大小像素单位" subtitle="">
            <p>1.设置图片宽度</p>
            <p>2.设置图片高度</p>
          </q-timeline-entry>

          <q-timeline-entry title="转换链接" subtitle="">
            <p>1. 选择要转换的图片链接并复制</p>
            <p>2. 粘贴到输入框，点击转换并复制按钮，此时转换后的链接已经复制到粘贴板</p>
          </q-timeline-entry>
          <q-timeline-entry title="生成图片" subtitle="">
            <p>1. 选择要插入图片的数据列</p>
            <p>2. ctrl+V粘贴，即可生成图片</p>
            <p>3. 选中其中任意一个后，ctrl+A选中所有图片，右键“图片嵌入单元格”</p>
          </q-timeline-entry>
        </q-timeline>
      </q-card-section>

      <div class="q-pa-md">
        <q-toolbar class="text-primary">
          <q-toolbar-title>
            演示教程
          </q-toolbar-title>
          <q-btn flat round dense icon="more_vert" @click="openInNew('www/video/excel_to_pic.mp4')" />
        </q-toolbar>

        <q-video :ratio="16 / 9" src="video/excel_to_pic.mp4" />
      </div>
      <q-card-actions align="right">
        <q-btn flat label="关闭" color="primary" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>

</template>

<script setup>
import { computed, ref } from 'vue'
import { useQuasar } from 'quasar'

import { copyTextToClipboard } from '../utils/utils'

const $q = useQuasar()

const text = ref('')
const basic = ref(false)
const checkFormat = ref(true)

const input_width = ref(100)
const input_height = ref(60)

// 校验链接是否是图片后缀
function isImageUrl(url) {
  if (checkFormat.value) {
    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
    const urlExtension = url.split('.').pop().toLowerCase();
    return imageExtensions.includes(urlExtension);
  } else {
    return true
  }
};

function format_url_data(url) {
  if (url) {
    var td = ""
    var img_list = url.split(';').filter(Boolean)

    img_list.forEach(function (item) {
      if (isImageUrl(item)) {
        td += '<td><img src="' + item + '" height="'+input_height.value+'" width="'+input_width.value+'"/></td>';
      }
    });
    return td ? '<table><tr>' + td + '</tr></table>' : '<table></table>'
  } else {
    return '<table></table>'
  }
}

const format_text_rows_to_one = () => {
  if (!text.value) {
    $q.notify({
      position: 'top',
      type: 'warning',
      message: '请填写数据!'
    })
  } else {
    let link_data = text.value.replace(/\n/g, "||").split('||')

    const newArr = link_data.map(format_url_data);
    const new_link_data = newArr.join('\n')
    text.value = new_link_data
    copyTextToClipboard(new_link_data)
    $q.notify({
      position: 'top',
      type: 'positive',
      message: '已复制到剪贴板'
    })
  }
}

const show_info = () => {
  basic.value = true
}
const clear = () => {
  text.value = ''
}

const openInNew = (url) => {
  $q.bex.send('open_in_new', { url: url })
}

</script>